<template>
  <div>
    <cal-result :result="result"></cal-result>
    <div class="inputs">
      <cal-input field="firstNumber" @dispatch="dispatch"></cal-input>
      <cal-input field="secondNumber" @dispatch="dispatch"></cal-input>
    </div>
    <!-- @changeMethod="changeMethod" -->
    <div class="buttons">
      <cal-button
        innerText="+"
        method="plus"
        :curMethod="curMethod"
        @dispatch="dispatch"
      ></cal-button>
      <cal-button
        innerText="-"
        method="minus"
        :curMethod="curMethod"
        @dispatch="dispatch"
      ></cal-button>
      <cal-button
        innerText="*"
        method="mul"
        :curMethod="curMethod"
        @dispatch="dispatch"
      ></cal-button>
      <cal-button
        innerText="/"
        method="div"
        :curMethod="curMethod"
        @dispatch="dispatch"
      ></cal-button>
    </div>
  </div>
</template>

<script>
import CalResult from "./CalResult.vue";
import CalInput from "./CalInput.vue";
import CalButton from "./CalButton.vue";

import dispatch from "../../dispatchers/calculator";

export default {
  name: "Calculator",
  components: {
    CalResult,
    CalInput,
    CalButton,
  },
  data() {
    return {
      firstNumber: 0,
      secondNumber: 0,
      result: 0,
      curMethod: "plus",
    };
  },
  methods: {
    // compute(method, fNumber, sNumber) {
    //   switch (method) {
    //     case "plus":
    //       return fNumber + sNumber;
    //     case "minus":
    //       return fNumber - sNumber;
    //     case "mul":
    //       return fNumber * sNumber;
    //     case "div":
    //       return fNumber / sNumber;
    //     default:
    //       break;
    //   }
    // },
    // setNumber(field, val) {
    //   // console.log(field, val);
    //   // this[field] => this.firstNumber/this.secondNumber
    //   this[field] = val;
    //   this.setResult();
    // },
    // changeMethod(method) {
    //   // console.log(method);
    //   //add/minus/mul/div
    //   this.curMethod = method;
    //   this.setResult();
    // },
    // setResult() {
    //   this.result = this.compute(
    //     this.curMethod,
    //     this.firstNumber,
    //     this.secondNumber
    //   );
    // },

    dispatch(...args) {
      dispatch(this)(...args);
    },
  },
};
</script>